<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>修改密码</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
	
    <!-- Custom CSS -->
    <link href="css/sb-admin.css" rel="stylesheet">
	<link href="dist/css/bootstrapValidator.css">
    <!-- Morris Charts CSS -->
    <link href="css/plugins/morris.css" rel="stylesheet">
	<link href="nuget/content/content/toastr.css" rel="stylesheet" type="text/css"/>
    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<!-- tab table-->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_i0327076nave7b9.css"/>
    <link rel="stylesheet" type="text/css" href="css/datatable.css"/>
    <style>
		#example_paginate{
			float:right;
		}
		.handle-btn{
			cursor: pointer;
		    margin: 0 2px;
		}
		#wrapper {
		    padding-left:0px;
		}
		.navigation{
			border-bottom: 3px solid #edebeb;
		}
		.navigation a:hover{
			color: #0F6AFC;
			border-bottom: 2px solid #01AAED;
		}
		.this{
			color: #01aaed;
			font-weight:bold;
			border-bottom: 2px solid #01AAED;
		}
	</style>
</head>

<body>

    <div id="wrapper">

        <!-- Navigation -->
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header" style=" width:225px;">
                <a class="navbar-brand" href="index.html">无人车管理系统</a>
            </div>
            <!-- Top Menu Items -->
            <ul class="nav navbar-right top-nav">
                 <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> 用户名 <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="refereePwd.html"><i class="fa fa-fw fa-gear"></i> 修改密码</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="login.html"><i class="fa fa-fw fa-power-off"></i> 退出</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
            
            <!-- /.navbar-collapse -->
        </nav>

        <div id="page-wrapper">

            <div class="container-fluid">
				<div class="row sss">
					<nav class="navbar navbar-default" role="navigation">
						<div>
							<ul class="nav navbar-nav">
								<li><a href="index.html">首页</a></li>
								<li class="active"><a href="details.html">修改密码</a></li>
							</ul>
						</div>
					</nav>
				</div>
                <!-- /.row -->
                 <div class="row">
                	<div class="panel">
                        <div class="panel-heading">
                        	<ul class="nav">
                        		<li style="float: left;"><h3 class="panel-title" style="line-height: 34px;">修改密码</h3></li>
                        	</ul>
                        </div>
                        <div class="panel-body">
	                       <form class="form-horizontal" id="addform" method="get">
	                          <div class="form-group">
	                              <label class="col-sm-1 control-label">原密码</label>
	                              <div class="col-sm-2">
	                                  <input type="password" name="oldPwd" id="oldPwd"  class="form-control">
	                              </div>
	                          </div>
	                          <div class="form-group">
	                              <label class="col-sm-1 control-label">新密码</label>
	                              <div class="col-sm-2">
	                                  <input type="password" name="userPwd" id="userPwd"   class="form-control">
	                              </div>
	                          </div>
	                          <div class="form-group">
	                              <label class="col-sm-1 control-label">确认新密码</label>
	                              <div class="col-sm-2">
	                                  <input type="password" id="userPwds" name="repassword" class="form-control">
	                              </div>
	                          </div>
	                          <div class="btn-group col-sm-1"  >
									<button class="btn btn-default" type="button" id="button_a">
							    		确定修改
									</button>
							   </div>
	                        </form>
                        </div>
                   </div>
                </div>
                <!-- /.row -->
                <!-- 模态框（Modal） -->
				<div class="modal fade" id="myAlert" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				    <div class="modal-dialog">
				        <div class="modal-content">
				            <div class="modal-header">
				                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
				                    &times;
				                </button>
				                <h4 class="modal-title" id="myModalLabel">
				                    	提示
				                </h4>
				            </div>
				            <div class="modal-body">
				                	修改成功
				            </div>
				            <div class="modal-footer">
				                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
				                </button>
				            </div>
				        </div><!-- /.modal-content -->
				    </div><!-- /.modal -->
				</div>
            </div>
            <!-- /.container-fluid -->

        </div>
        <!-- /#page-wrapper -->

    </div>
    <!-- /#wrapper -->

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
	<!-- tab table-->
	<script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
	<script src="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.js"></script>
	<!-- device-->
	<script type="text/javascript" src="js/md5.js"></script>
	<script type="text/javascript" src="dist/js/bootstrapValidator.min.js"></script>
	<script src="nuget/content/scripts/toastr.js"></script>
	<script type="text/javascript" src="js/common.js" ></script>
	<script type="text/javascript" src="js/vue/vue.js" ></script>
	<script type="text/javascript" src="js/vue/vue-router.js" ></script>
	<script>
		$("#button_a").on('click',function(){
			var oldPwd = hex_md5($("#oldPwd").val()); 
        	var userPwd = hex_md5($("#userPwd").val());
			$.ajax({
				url : url +'/users/'+adminId+'/pwd',
				type : 'POST',
				dataType : 'json',
				data :{
					"oldPwd":oldPwd,
					"userPwd":userPwd,
				},
				beforeSend: function(request) {
		            request.setRequestHeader("accessToken", accessToken);
		        },
				success : function(data) {
					if(data['code'] == 1){
						$("#myAlert").modal("toggle");
						window.parent.location.href = 'login.html';
					}else{
						alert('修改失败');
					}
				}
			});
		})
		$(document).ready(function(){
			$('#addform').bootstrapValidator({
				message: 'This value is not valid',
		        feedbackIcons: {
		            valid: 'glyphicon glyphicon-ok',
		            invalid: 'glyphicon glyphicon-remove',
		            validating: 'glyphicon glyphicon-refresh'
		        },
				fields:{
				//    密码
				    userPwd:{
				     message:'密码非法',
				     validators:{
				      notEmpty:{
				       message:'密码不能为空'
				      },
				//      限制字符串长度
				      stringLength:{
				       min:3,
				       max:20,
				       message:'密码长度必须位于3到20之间'
				      },
				//      相同性检测
				      identical:{
				//       需要验证的field
				       field:'password',
				       message:'两次密码输入不一致'
				      },
				//      基于正则表达是的验证
				      regexp:{
				       regexp:/^[a-zA-Z0-9_\.]+$/,
				       message:'密码由数字字母下划线和.组成'
				      }
				     }
				    },
				 
				    //    确认密码
				    repassword:{
				     message:'密码非法',
				     validators:{
				      notEmpty:{
				       message:'密码不能为空'
				      },
				//      限制字符串长度
				      stringLength:{
				       min:3,
				       max:20,
				       message:'密码长度必须位于3到20之间'
				      },
				//      相同性检测
				      identical:{
				//       需要验证的field
				       field:'userPwd',
				       message:'两次密码输入不一致'
				      },
				//      基于正则表达是的验证
				      regexp:{
				       regexp:/^[a-zA-Z0-9_\.]+$/,
				       message:'密码由数字字母下划线和.组成'
				      }
				     }
				    },
				}
			})
		})
	</script>
</body>

</html>
